<template>
  <div class="wrap">
    <head-view></head-view>
    <!-- 轮播图及二级菜单 -->
    <div class="swiper-container">
      <div class="left_box">
        <ul class="list">
          <li v-for="(item, index) in categoryBanners" :key="index">
            {{ item.name }}
            <span v-for="(i, index2) in item.children" :key="index2">
              <p v-if="index2 == 1">{{ i.name }}</p>
              <p v-if="index2 == 2">{{ i.name }}</p>
            </span>
            <ol>
              <p class="classfiy">
                分类推荐<span class="classfiy_2">根据您的购买或浏览记录推荐</span>
              </p>
              <div class="imgbox">
                <li class="itemList" v-for="(j, index3) in item.goods" :key="index3">
                  <div class="itembox">
                    <img :src="j.picture" alt="" />
                    <div>
                      <p class="name">{{ j.name }}</p>
                      <p class="desc">{{ j.desc }}</p>
                      <p class="price"><span>￥</span>{{ j.price }}</p>
                    </div>
                  </div>
                </li>
              </div>
            </ol>
          </li>
        </ul>
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in container" :key="index">
          <img :src="item.imgUrl" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <!-- 新鲜好物 -->
    <div class="freshGoods">
      <div class="title">
        <p>新鲜好物</p>
        <div class="lef_rig">
          <span>新鲜出炉 品质靠谱</span><span>查看全部 ></span>
        </div>
      </div>
      <div class="newbox">
        <div class="newimg" v-for="(item, index) in freshGoods" :key="index">
          <img :src="item.picture" alt="" />
          <div class="desc desc_bg">
            <p class="name">{{ item.name }}</p>
            <p class="price">￥{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="hotRecommends">
      <div class="title">
        <p>人气推荐</p>
        <div class="lef_rig">人气爆款不容错过 <span></span></div>
      </div>
      <div class="newbox">
        <div class="newimg" v-for="(item, index) in hotRecommends" :key="index">
          <img :src="item.picture" alt="" />
          <div class="desc">
            <p class="ref">{{ item.title }}</p>
            <p class="alt">{{ item.alt }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门品牌 -->
    <div class="hotBrands">
      <div class="title">
        <p>热门品牌</p>
        <div class="lef_rig">
          <span>国际经典 品牌保证</span>
          <div class="btn">
            <span :class="['prev', isLeft ? 'active' : '']" @click="prev">1</span>
            <span :class="['next', isRight ? 'active' : '']" @click="next">></span>
          </div>
        </div>
      </div>
      <div class="an_hotBrands">
        <ul class="list" :style="
          isLeft
            ? 'transform: translateX(0px)'
            : 'transform: translateX(-1240px)'
        ">
          <li v-for="(item, index) in hotBrands" :key="index">
            <img :src="item.picture" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 居家 -->
    <div class="livehome" v-for="(item, index) in livehome" :key="index">
      <div class="livebox">
        <div class="title">
          <h3>{{ item.name }}</h3>
          <div class="sub">
            <span v-for="(j, index) in item.children" :key="index">
              {{ j.name }}
            </span>
          </div>
          <div class="all">查看全部 ></div>
        </div>
        <div class="imgbox">
          <ul class="list">
            <li :src="item.picture">
              <div class="goods-item">
                <img :src="item.picture" alt="" />
                <strong class="saleInfo"><span class="rans">{{ item.name }}馆</span><span class="sale">{{ item.saleInfo
                }}</span></strong>
              </div>
            </li>
            <li v-for="(i, index) in item.goods" :key="index" @click="detail(i.id)">
              <div class="goods-item">
                <img :src="i.picture" alt="" />
                <p class="name">{{ i.name }}</p>
                <p class="desc">{{ i.desc }}</p>
                <p class="price">￥{{ i.price }}</p>
                <div class="z_box">
                  <p>找相似</p>
                  <p>发现更多宝贝 ></p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 最新专题 -->
    <div class="special">
      <div class="title">
        <h3>最新专题</h3>
        <p>查看更多 ></p>
      </div>
      <div class="imgbox">
        <div class="special-item" v-for="(item, index) in special" :key="index">
          <div class="metabox">
            <img :src="item.detailsUrl" alt="" />
            <div class="meta">
              <p>
                <span class="tle">{{ item.title }}</span>
                <span class="summary">{{ item.summary }}</span>
              </p>
              <span class="price">￥{{ item.lowestPrice }}起</span>
            </div>
            <div class="foot">
              <span class="like">
                <img src="icon/xihuan.png" alt="" />
                {{ item.replyNum }}</span>
              <span class="vie">
                <img src="icon/kanguo.png" alt="" />
                {{ item.collectNum }}
              </span>
              <span class="reply">
                <img src="icon/xiaoxi.png" alt="" />
                {{ item.viewNum }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import headView from "../../components/HeadView.vue";
export default {
  name: "homeView",
  components: {
    headView,
  },
  data() {
    return {
      categoryBanners: [], //所有首页数据
      container: [], //轮播图
      freshGoods: [], //新鲜好物
      hotRecommends: [], //人气推荐
      hotBrands: [], //热门品牌
      special: [],
      isLeft: true,
      isRight: false,
      livehome: [],
    };
  },
  created() {
    // 首页所有数据
    this.$api.getss().then((res) => {
      this.container = res.data.result.imageBanners;
      this.categoryBanners = res.data.result.categoryBanners;
      // console.log(this.categoryBanners)
    });
    // 新鲜好物
    this.$api.freshGoods().then((res) => {
      // console.log("新鲜好物",res.data.result)
      this.freshGoods = res.data.result;
    });
    // 人气推荐
    this.$api.hotRecommends().then((res) => {
      // console.log("热气推荐",res.data.result)
      this.hotRecommends = res.data.result;
    });
    // 热门品牌
    this.$api.hotBrands().then((res) => {
      // console.log("热门品牌",res.data.result)
      this.hotBrands = res.data.result;
    });
    // 最新专题
    this.$api.special().then((res) => {
      // console.log('最新专题',res.data.result)
      this.special = res.data.result;
    });
    this.$api.goodsData().then((res) => {
      this.livehome = res.data.result;
      // console.log(this.livehome)
    });
  },
  mounted() {
    new Swiper(".swiper-container", {
      direction: "horizontal", // 垂直切换选项
      //mousewheel: true, //滚轮
      autoplay: {
        //自动开始
        delay: 2500, //时间间隔
        disableOnInteraction: false, //*手动操作轮播图后不会暂停*
      },
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true, // 分页器可以点击
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  },
  methods: {
    prev() {
      this.isLeft = true;
      this.isRight = false;
    },
    next() {
      this.isLeft = false;
      this.isRight = true;
    },
    detail(id) {
      this.$router.push({ name: "detail", query: { detailId: id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
}

.swiper-container {
  width: 1240px;
  height: 500px;
  margin: 0 auto;
  position: relative;

  .swiper-wrapper {
    .swiper-slide {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .left_box {
    width: 250px;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;

    .list {
      list-style: none;
      width: 100%;
      height: 100%;
      position: relative;

      li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: flex;
        color: #fff;
        padding-left: 15px;
        box-sizing: border-box;

        ol {
          display: none;
          width: 1000px;
          height: 500px;
          position: absolute;
          left: 250px;
          top: 0;
          background: rgba(255, 255, 255, 0.7);

          .classfiy {
            width: 100%;
            font-size: 26px;
            margin-left: 15px;
            color: #000;

            .classfiy_2 {
              font-size: 14px;
              color: #333;
              margin-left: 10px;
            }
          }

          .imgbox {
            width: 100%;
            height: 450px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;

            .itemList:nth-child(10) {
              display: none;
            }

            .itemList {
              width: 300px;
              height: 100px;
              display: flex;
              color: #000;

              .itembox {
                width: 200px;
                height: 100px;
                display: flex;

                img {
                  width: 100px;
                  height: 100px;
                }

                p {
                  font-size: 14px;
                }

                .desc {
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }

      li:hover ol {
        display: block;
      }
    }
  }

  .swiper-button-prev {
    margin-left: 250px;
  }
}

.freshGoods,
.hotRecommends,
.hotBrands {
  width: 100vw;
  height: 541px;
  background: #fff;

  .title {
    width: 1240px;
    height: 115px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    p {
      font-size: 32px;
      font-weight: 400;
      margin-left: 10px;
    }

    .lef_rig {
      width: calc(100% - 150px);
      font-size: 16px;
      color: #999;
      display: flex;
      justify-content: space-between;
    }
  }

  .newbox {
    width: 1240px;
    height: 426px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .newimg {
      width: 306px;
      height: 406px;

      img {
        width: 306px;
        height: 306px;
      }

      .desc_bg {
        background: #f0f9f4;
      }

      .desc {
        width: 100%;
        height: 100px;
        text-align: center;

        .name {
          font-size: 22px;
          padding: 12px 30px 0 30px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .price {
          color: #cf4444;
          font-size: 22px;
          padding: 12px 30px 0 30px;
        }

        .ref {
          font-size: 22px;
          padding-top: 12px;
        }

        .alt {
          padding-top: 12px;
          color: #999;
          font-size: 18px;
        }
      }
    }

    .newimg:hover {
      box-shadow: -1px 0 1px #ccc, 1px 0 1px #ccc, 0 0 0, 0 10px 10px #ccc;
      transform: scaleZ(1.02);
      transform: scaleY(1.02);
      transition: all 0.5s;
    }
  }
}

.hotBrands {
  width: 100vw;
  height: 460px;
  background: #f5f5f5;

  .btn {
    width: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .prev,
    .next {
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background: #27ba9b;
      color: #fff;
      font-size: 16px;
    }

    .active {
      background: #ccc;
    }

    .transL {
      transform: translateX(0px);
    }

    .transR {
      transform: translateX(-1240px);
    }
  }

  .an_hotBrands {
    width: 1240px;
    height: 345px;
    overflow: hidden;
    padding-bottom: 40px;
    margin: 0 auto;

    .list {
      width: 2480px;
      display: flex;
      justify-content: space-between;
      transition: all 1s;

      li {
        img {
          width: 240px;
          height: 305px;
        }
      }
    }
  }
}

.livehome {
  width: 100vw;
  height: 740px;
  background: #fff;

  .livebox {
    width: 100%;
    height: 100%;

    .title {
      width: 1240px;
      padding: 40px 0;
      margin: 0 auto;
      display: flex;
      align-items: flex-end;

      h3 {
        flex: 3;
        font-size: 32px;
        font-weight: 400;
        margin-left: 6px;
        height: 35px;
        line-height: 35px;
      }

      .sub {
        flex: 2;

        span {
          padding: 2px 12px;
          font-size: 16px;
          border-radius: 4px;
        }

        span:hover {
          background: #27ba9b;
          color: #fff;
        }
      }

      .all {
        font-size: 16px;
        vertical-align: middle;
        margin-right: 4px;
        color: #999;
      }
    }

    .imgbox {
      width: 1240px;
      height: 610px;
      margin: 0 auto;

      .list {
        list-style: none;

        li:first-child {
          width: 240px;
          height: 610px;

          .goods-item:hover {
            border: 1px solid transparent;
          }

          .goods-item {
            width: 240px;
            height: 610px;
            padding: 0;

            img {
              width: 240px;
              height: 610px;
            }
          }
        }

        li {
          width: 240px;
          height: 300px;
          float: left;
          margin-right: 5px;
          margin-bottom: 10px;

          .goods-item:hover .z_box {
            transform: translate3d(0, 0, 0);
          }

          .goods-item:hover {
            border: 1px solid #27bb9a;
          }

          .goods-item {
            width: 178px;
            height: 278px;
            padding: 10px 30px;
            overflow: hidden;
            border: 1px solid transparent;
            transition: all 0.5s;
            position: relative;

            img {
              width: 160px;
              height: 160px;
              margin-left: 10px;
            }

            .name {
              height: 44px;
              margin-top: 6px;
              font-size: 16px;
            }

            .desc {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              margin-top: 6px;
              color: #666;
            }

            .price {
              margin-top: 10px;
              font-size: 20px;
              color: #cf4444;
            }

            .z_box {
              position: absolute;
              left: 0;
              bottom: 0;
              height: 86px;
              width: 100%;
              background: #27ba9b;
              text-align: center;
              transform: translate3d(0, 100%, 0);
              transition: all 0.5s;
              color: #fff;

              p:first-child {
                width: 120px;
                font-size: 18px;
                border-bottom: 1px solid #fff;
                line-height: 40px;
                margin: 5px auto 0;
              }

              p:last-child {
                display: block;
                color: #fff;
                width: 120px;
                margin: 0 auto;
                line-height: 30px;
              }
            }

            .saleInfo {
              width: 188px;
              height: 66px;
              display: flex;
              font-size: 18px;
              color: #fff;
              line-height: 66px;
              font-weight: 400;
              text-align: center;
              position: absolute;
              left: 10px;
              top: 50%;

              .rans {
                width: 76px;
                background: rgba(0, 0, 0, 0.9);
              }

              .sale {
                flex: 1;
                background: rgba(0, 0, 0, 0.7);
              }
            }
          }
        }
      }
    }
  }
}

.special {
  width: 100vw;
  height: 495px;
  background: #f5f5f5;

  .title {
    width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    padding: 40px 0;

    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: 400;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
    }

    p {
      color: #999;
    }
  }

  .imgbox {
    width: 1240px;
    height: 380px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    img {
      width: 404px;
      height: 288px;
    }

    .special-item:hover {
      box-shadow: -1px 0 1px #ccc, 1px 0 1px #ccc, 0 0 0, 0 10px 10px #ccc;
      transform: scaleZ(1.5);
      margin-top: -5px;
      transition: all 0.5s;
    }

    .special-item {
      width: 404px;
      height: 360px;
      position: relative;

      .metabox {
        position: absolute;

        .meta {
          background-image: linear-gradient(0deg,
              rgba(0, 0, 0, 0.8),
              transparent 50%);
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 288px;

          p {
            position: absolute;
            bottom: 0;
            left: 0;
            padding-left: 16px;
            width: 70%;
            height: 70px;

            .tle {
              color: #fff;
              font-size: 22px;
              display: block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .summary {
              display: block;
              font-size: 19px;
              color: #999;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .price {
            position: absolute;
            bottom: 25px;
            right: 16px;
            line-height: 1;
            padding: 4px 8px 4px 7px;
            color: #cf4444;
            font-size: 17px;
            background-color: #fff;
            border-radius: 2px;
          }
        }

        .foot {
          height: 72px;
          line-height: 72px;
          padding: 0 20px;
          font-size: 16px;

          .like,
          .view {
            float: left;
            margin-right: 25px;
            vertical-align: middle;
          }

          .reply {
            float: right;
            vertical-align: middle;
          }

          span {
            vertical-align: middle;

            img {
              width: 25px;
              height: 25px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>